<template>
  <div class="resources-container">
    <el-card class="search-card">
      <div class="search-header">
        <el-input
          v-model="searchQuery"
          placeholder="搜索资料..."
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="success" @click="uploadResource">上传资料</el-button>
      </div>
      
      <!-- 资料分类 -->
      <div class="category-tags">
        <el-tag
          v-for="tag in categories"
          :key="tag.value"
          :type="selectedCategory === tag.value ? '' : 'info'"
          class="category-tag"
          @click="selectCategory(tag.value)"
        >
          {{ tag.label }}
        </el-tag>
      </div>
    </el-card>

    <!-- 资料列表 -->
    <div class="resources-list">
      <el-empty v-if="resources.length === 0" description="暂无资料" />
      <el-card v-for="resource in resources" :key="resource.id" class="resource-item">
        <div class="resource-header">
          <div class="resource-title">
            <el-icon><document /></el-icon>
            <h4>{{ resource.title }}</h4>
          </div>
          <el-tag size="small">{{ resource.category }}</el-tag>
        </div>
        <p class="resource-description">{{ resource.description }}</p>
        <div class="resource-footer">
          <div class="resource-info">
            <span>上传者：{{ resource.uploader }}</span>
            <span>上传时间：{{ resource.uploadTime }}</span>
            <span>下载次数：{{ resource.downloads }}</span>
          </div>
          <el-button type="primary" @click="downloadResource(resource)">下载</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Document } from '@element-plus/icons-vue'

const searchQuery = ref('')
const selectedCategory = ref('')

const categories = [
  { label: '全部', value: '' },
  { label: '考试资料', value: 'exam' },
  { label: '课程笔记', value: 'notes' },
  { label: '实验报告', value: 'lab' },
  { label: '课程作业', value: 'homework' },
  { label: '其他资料', value: 'other' }
]

// 模拟数据
const resources = ref([
  {
    id: 1,
    title: '高等数学期末复习资料',
    category: '考试资料',
    description: '包含历年试题和详细解答，适合期末复习使用。',
    uploader: '张三',
    uploadTime: '2024-03-19',
    downloads: 156
  },
  {
    id: 2,
    title: '数据结构实验报告模板',
    category: '实验报告',
    description: '包含完整的实验报告格式和示例。',
    uploader: '李四',
    uploadTime: '2024-03-18',
    downloads: 89
  }
])

const handleSearch = () => {
  // TODO: 实现搜索功能
}

const selectCategory = (category) => {
  selectedCategory.value = category
  // TODO: 根据分类筛选资料
}

const uploadResource = () => {
  // TODO: 实现上传资料功能
}

const downloadResource = (resource) => {
  // TODO: 实现下载资料功能
}
</script>

<style scoped>
.resources-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-header {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-tag {
  cursor: pointer;
}

.resources-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.resource-item {
  transition: all 0.3s;
}

.resource-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.resource-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-title h4 {
  margin: 0;
  color: #333;
}

.resource-description {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.resource-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resource-info {
  display: flex;
  gap: 20px;
  color: #999;
  font-size: 14px;
}
</style> 